<template>
  <div class="create-article">
    <h2>新增文章</h2>

    <el-skeleton v-if="loading" :rows="6" animated />

    <el-alert v-else-if="error" :title="error" type="error" show-icon :closable="false" />

    <el-alert v-else-if="successMessage" :title="successMessage" type="success" show-icon :closable="false" />

    <el-form v-else :model="article" @submit.prevent="handleSubmit" label-position="top">
      <!-- 分类 -->
      <el-form-item label="分类">
        <el-select v-model="article.categoryId" placeholder="请选择分类" style="width: 100%">
          <el-option label="请选择分类" value=""></el-option>
          <el-option
            v-for="(name, id) in categoriesMap"
            :key="id"
            :label="name"
            :value="id"
          />
        </el-select>
      </el-form-item>

      <!-- 标题 -->
      <el-form-item label="标题">
        <el-input v-model="article.title" placeholder="请输入标题" />
      </el-form-item>

      <!-- 内容 -->
      <el-form-item label="内容">
        <div class="editor">
          <quill-editor
          v-model:content="article.content"
          :options="editorOptions"
          @image-added="handleImageAdded"
          style="min-height: 500px; margin-bottom: 20px;"
          />
        </div>
      </el-form-item>

      <!-- 提交按钮 -->
      <el-form-item>
        <el-button type="primary" native-type="submit" :loading="loading" style="width: 100px">
          {{ loading ? '提交中...' : '提交文章' }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { QuillEditor, Quill } from '@vueup/vue-quill';
import ImageUploader from 'quill-image-uploader';
import 'quill/dist/quill.snow.css';
import { useCategories } from '../composables/useCategory';
import { useImageUpload } from '../composables/useImageUpload';
import { useCreateArticle } from '../composables/useCreateArticle'; // 导入新的组合函数

Quill.register("modules/imageUploader", ImageUploader);

// 获取分类列表
const { categoriesMap, fetchCategories } = useCategories();
const { uploadImage ,handleImageAdded } = useImageUpload();
const { loading, error, successMessage, createArticle } = useCreateArticle();

// 使用 Pinia Store
const router = useRouter();

// 状态
const article = ref({
  title: '',
  content: '',  // 将json转为字符串
  categoryId: '', // 可根据需要设置默认分类或从接口获取
});

const editorOptions = ref({
  modules: {
    imageUploader: {
      upload: async (file) => {
        let res = await uploadImage(file); // 此处为自己的上传接口
        console.log(res);
        return res; // 此处替换为接口返回的文件路径
      }
    },
    toolbar: [
      ['bold', 'italic', 'underline'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      ['image','video']
    ],
  },
  placeholder: '请输入内容...',
});

onMounted(() => {
  fetchCategories();
});

// 提交处理
const handleSubmit = async () => {

  const isSuccess = await createArticle(
    article.value.title
    , article.value.content
    , article.value.categoryId
  );
  if (isSuccess) {
    router.push('/articles');
  }
};
</script>

<style scoped>
.create-article {
  max-width: 1980px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-form-item {
  margin-bottom: 20px;
}

.editor{
  width: 100%; 
}
</style>